import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import PropTypes from 'prop-types'

import './skeyboard.scss'
import downIcon from './static/icon_down.png'

/**
 * @description：自定义数字软键盘
 * @author huangkh
 */
class SkeyBoard extends Component {
    config = {
        navigationBarTitleText: '自定义软键盘'
    }
    constructor(props) {
        super(props)
    }

    render () {
        const { onNumKeyClickHandler, onDeleteHandler, onClearHandler, onShowHandler } = this.props
        return (
            <View className='skb_container'>
                <View className='skb_hide' ><Image src={downIcon} className='skb_downIcon'></Image></View>
                <View className='skb_rows'>
                    <View className='skb_row'>
                        <View className='skb_rowitem' hoverClass='raised' onClick={onNumKeyClickHandler()} id='num1'><Text id='txt1'>1</Text></View>
                        <View className='skb_rowitem' hoverClass='raised' onClick={onNumKeyClickHandler()} id='num2'><Text id='txt2'>2</Text></View>
                        <View className='skb_rowitem' hoverClass='raised' onClick={onNumKeyClickHandler()} id='num3'><Text id='txt3'>3</Text></View>
                    </View>
                    <View className='skb_row'>
                        <View className='skb_rowitem' hoverClass='raised' onClick={onNumKeyClickHandler()} id='num4'><Text id='txt4'>4</Text></View>
                        <View className='skb_rowitem' hoverClass='raised' onClick={onNumKeyClickHandler()} id='num5'><Text id='txt5'>5</Text></View>
                        <View className='skb_rowitem' hoverClass='raised' onClick={onNumKeyClickHandler()} id='num6'><Text id='txt6'>6</Text></View>
                    </View>
                    <View className='skb_row'>
                        <View className='skb_rowitem' hoverClass='raised' onClick={onNumKeyClickHandler()} id='num7'><Text id='txt7'>7</Text></View>
                        <View className='skb_rowitem' hoverClass='raised' onClick={onNumKeyClickHandler()} id='num8'><Text id='txt8'>8</Text></View>
                        <View className='skb_rowitem' hoverClass='raised' onClick={onNumKeyClickHandler()} id='num9'><Text id='txt9'>9</Text></View>
                    </View>
                    <View className='skb_row'>
                        <View className='skb_rowitem' hoverClass='raised' onClick={onClearHandler()} id='clear1'><Text id='clear2'>清空</Text></View>
                        <View className='skb_rowitem' hoverClass='raised' onClick={onNumKeyClickHandler()} id='num0'><Text id='txt0'>0</Text></View>
                        <View className='skb_rowitem' hoverClass='raised' onClick={onDeleteHandler()} id='delete1'><Text id='delete2'>删除</Text></View>
                    </View>
                </View>
            </View>
        )
    }

}

SkeyBoard.propTypes = {
    onNumKeyClickHandler: PropTypes.func,
    onDeleteHandler: PropTypes.func,
    onClearHandler: PropTypes.func,
    onShowHandler: PropTypes.func
}

SkeyBoard.defaultProps = {
    onNumKeyClickHandler: ()=>{},
    onDeleteHandler: ()=>{},
    onClearHandler: ()=>{},
    onShowHandler: ()=>{},
}


export default SkeyBoard 